import { Icon } from "@iconify/react"
import type { Meta, StoryObj } from "@storybook/react"

import { sampleData } from "@/routes/sampleMenuData"
import { MenuDataItem } from "@/routes/type"
import { getItem } from "@/utils"

import { GlobalMenuOption, MenuItem, SelectInfo } from "../../types"
import VerticalSider from "."

const meta = {
	title: "GlobalSider/VerticalSider",
	component: VerticalSider,
	parameters: {
		layout: "centered"
	},
	tags: ["autodocs"]
} satisfies Meta<typeof VerticalSider>

export default meta
type Story = StoryObj<typeof meta>

const getMenuChildren = (menuChildrenItem: MenuDataItem[] | null | undefined): MenuItem[] => {
	return (menuChildrenItem || []).map((menuDataItem: MenuDataItem) => {
		return getItem(
			menuDataItem.permissionName,
			menuDataItem.path,
			<Icon icon={menuDataItem.icon} />,
			menuDataItem.children ? getMenuChildren(menuDataItem.children) : undefined
		)
	})
}
const currentSideMenus: MenuItem[] = (getMenuChildren(sampleData)[1] as GlobalMenuOption).children || []
export const VerticalSiderComponent: Story = {
	args: {
		collapsed: false,
		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		setCollapsed: (_collapsed: boolean) => {},
		hideButton: false,
		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		onSelect: (_item: SelectInfo) => {},
		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		onOpenChange: (openKeys: string[]) => {},
		selectedKeys: ["/100000/101000", "/100000/101000/101010"],
		openKeys: ["/100000/101000"],
		currentSideMenus
	},
	render: args => {
		return <VerticalSider {...args} openKeys={args.collapsed ? [] : args.openKeys} />
	}
}
